<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		   .main{
		    	
		   }
		
			.main table{
				margin: 0 auto;
				border: 1px solid black;
				border-spacing: 1px;
				text-align: center;
				
			}
			
			th{
				background-color: deepskyblue;
				color: white;
			}
			
			td{
				border: 1px solid lightgray;
			}
		</style>
	</head>
	<body>
		<div class="main">
		<table>
			<thead>
			<tr>
				<td><input id="all"  type="checkbox" onclick="selectAll()"/></td>
				<td>菜名</td>
				<td>饭店</td>
			</tr>
			</thead>
			<tbody id="brief">
			<tr>
				<td><input type="checkbox"/></td>
				<td>地三鲜</td>
				<td>老师</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>狮子头</td>
				<td>老师</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>炒河粉</td>
				<td>老师</td>
			</tr>
			<tr>
				<td><input type="checkbox"/></td>
				<td>糖醋里脊</td>
				<td>老师</td>
			</tr>
			</tbody>
		</table>
		</div>
			<script>
//		function selectAll(){
//		alert("?");
//		var all = document.getElementById("all");
//		alert("??");
//		var tb= document.getElementById("tb");
//		alert("???");
//		var tbodyArray = tb.getElementsByTagName("input");
//		alert("????");
//	    	alert(tbodyArray.length);
//			if(var i=0;i<tbodyArray.length;i++){
//		      alert("sss");		
//				tbodyArray[i].checked = all.checked;
//			}

                function selectAll() {
				var all = document.getElementById("all");
				var brief = document.getElementById("brief");
				var tbodyArray = brief.getElementsByTagName("input");
				for(i = 0; i < tbodyArray.length; i++) {
					tbodyArray[i].checked = all.checked;
				}
			}
		}
	</script>
	</body>

</html>
